
import { useEffect } from "react";
import { Modal ,  Form, Input} from "antd";
import { UserItem } from "../../utils/types";

interface MyProps {
    visible: Boolean,
    data:UserItem,
    title:string,
    close():void,
    subm(data:UserItem):void
}

const MyModal = (props: MyProps) => {


    const { visible , title , data ,close , subm} = props;
    const [ form ] = Form.useForm();
    useEffect(() => {
        if(title === "编辑"){
            console.log(data);
            form.setFieldsValue({
                ...data
            })
        }else{
            console.log(111)
            form.setFieldsValue({
                user:"",
                addr:""
            })
        }
    },[data])

    const cancel = () => {
        close();
    };
    const ok = () => {
        //  首先获取输入框中的内容
        if(title === "编辑"){
            subm({
                ...data,
                ...form.getFieldsValue()
            })
        }else{
            subm({
                id:+new Date(),
                ...form.getFieldsValue(),
                tel:"13010000123",
                sex:"女",
                isMarried:false
            })
        }
        
    }

    return (
        <Modal 
            open={visible as boolean}
            title={title}
            destroyOnClose={true}
            forceRender={true}
            onCancel ={() => cancel()}
            onOk={() =>ok()}
        >
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                autoComplete="off"
                form={form}
            >
                <Form.Item
                    label="用户名"
                    name="user"
                    rules={[{ required: true, message: 'Please input your 用户名!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="地址"
                    name="addr"
                    rules={[{ required: true, message: 'Please input your addr!' }]}
                >
                    <Input />
                </Form.Item>
            </Form>
        </Modal>
    )
};


export default MyModal;



